<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
        <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    </head>
    <body>

        <div class="app container">
            <a class="btn btn-primary" @click="handler">随机修改年龄</a>
            <div class="row">
                <span class="col-4">{{student.id}}</span>
                <span class="col-4" v-if="student.age<20">小朱</span>
                <span class="col-4" v-else-if="student.age<40">朱女士</span>
                <span class="col-4" v-else-if="student.age<80">朱阿姨</span>
                <span class="col-4" v-else>朱奶奶</span>
                <span class="col-4">{{student.age}}</span>
            </div>
            <p v-show="student.age > 20 && student.age < 40">小朱女士</p>
            <a href="/index.html">返回首页</a>
        </div>

        <script src="/javascripts/vue@3.0.11.js" ></script>
        <script>
            const app = Vue.createApp( {
                data(){
                    return {
                        student: { id: 1001 , name: '朱亚红' , age: 18 }
                    }
                },
                methods: {
                    handler(event){
                        let age = 20 + ( Math.random() * 80 ) | 0 ;
                        this.student.age = age ;
                    }
                }
            } );

            app.mount( '.app' );
        </script>

    </body>
</html>